<template>
  <canvas ref="bjsCanvas" width="800" height="800" />
</template>

<script setup>
import {
  Engine,
  Scene,
  ArcRotateCamera,
  Vector3,
  HemisphericLight,
  MeshBuilder,
  Sound,
} from 'babylonjs'
// import { createScene } from '~/scenes/MyFirstScene'
const bjsCanvas = ref(null)

onMounted(() => {
  if (bjsCanvas.value) {
    createScene(bjsCanvas.value)
  }
})

const createScene = function (canvas) {
  const engine = new Engine(canvas)

  //这将创建一个基本的巴比伦场景对象（非网格）
  // This creates a basic Babylon Scene object (non-mesh)
  const scene = new Scene(engine)

  const camera = new ArcRotateCamera(
    'camera',
    -Math.PI / 2,
    Math.PI / 2.5,
    10,
    new Vector3(0, 0, 0)
  )
  camera.attachControl(canvas, true)

  const light = new HemisphericLight('light', new Vector3(1, 1, 0))
  // const box = MeshBuilder.CreateBox('box', {faceColors:'Color4(1, 1, 1, 1)'})
  const ground = MeshBuilder.CreateGround('ground', { width: 5, height: 10 })
  const box = MeshBuilder.CreateBox(
    'box',
    {
      height: 1,
      width: 1,
      depth: 1,
    },
    scene
  )

  //背景音乐
  const music = new Sound(
    'cello',
    'https://playground.babylonjs.com/sounds/cellolong.wav',
    scene,
    null,
    { loop: true, autoplay: true }
  )
  // 设置音量大小
  music.setVolume(0.2)

  // const bounce = new Sound(
  //   'bounce',
  //   'https://playground.babylonjs.com/sounds/bounce.wav',
  //   scene
  // )
  // setInterval(() => {
  //   bounce.play()
  // }, 3000)

  // getModel(scene)
  engine.runRenderLoop(() => {
    scene.render()
  })

}
</script>
